<template>
  <div>
    <div class="main-wrap">

      <!--标题 -->
      <div class="user-safety">
        <div class="am-cf am-padding">
          <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账户安全</strong> / <small>Set&nbsp;up&nbsp;Safety</small></div>
        </div>
        <hr />
        <div class="check">
          <ul>
            <li>
              <i class="i-safety-lock"></i>
              <div class="m-left">
                <div class="fore1">登录密码</div>
                <div class="fore2"><small>为保证您购物安全，建议您定期更改密码以保护账户安全。</small></div>
              </div>
              <div class="fore3">
                <router-link :to="{name:'restpwd'}">
                  <div class="am-btn am-btn-secondary">修改</div>
                </router-link>
              </div>
            </li>
            <li>
              <i class="i-safety-wallet"></i>
              <div class="m-left">
                <div class="fore1">支付密码</div>
                <div class="fore2"><small>启用支付密码功能，为您资产账户安全加把锁。</small></div>
              </div>
              <div class="fore3">
                <router-link :to="{name:'paypwd'}">
                  <div class="am-btn am-btn-secondary">修改</div>
                </router-link>
              </div>
            </li>
            <li>
              <i class="i-safety-iphone"></i>
              <div class="m-left">
                <div class="fore1">手机验证</div>
                <!-- <div class="fore2"><small>您验证的手机：186XXXXXXXX 若已丢失或停用，请立即更换</small></div> -->
              </div>
              <div class="fore3">
                 <router-link :to="{name:'bindphone'}">
                  <div class="am-btn am-btn-secondary">换绑</div>
                </router-link>
              </div>
            </li>
            <li>
              <i class="i-safety-mail"></i>
              <div class="m-left">
                <div class="fore1">邮箱验证</div>
                <!-- <div class="fore2"><small>您验证的邮箱：5831XXX@qq.com 可用于快速找回登录密码</small></div> -->
              </div>
              <div class="fore3">
                <router-link :to="{name: 'bindemail'}">
                  <div class="am-btn am-btn-secondary">换绑</div>
                </router-link>
              </div>
            </li>
            <li>
              <i class="i-safety-idcard"></i>
              <div class="m-left">
                <div class="fore1">实名认证</div>
                <div class="fore2" v-if="!security.authen"><small>用于提升账号的安全性和信任级别，认证后不能修改认证信息。</small></div>
                <div class="fore2" v-if="security.authen"><small>你已通过实名认证。</small></div>
              </div>
              <div class="fore3" v-if="!security.authen">
                <router-link :to="{name: 'idcard'}">
                  <div class="am-btn am-btn-secondary">认证</div>
                </router-link>
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'security',
  data () {
    return {
      security:{}
    }
  },
  mounted () {
    this.qrySecurity();
  },
  methods: {
    qrySecurity(){
      this.axios.get("/user/security").then((res)=>{
        let result = res.data;
        if(result.code==200){
          this.security = result.data;
        }
      })
    }
  }
}
</script>

<style scoped>
@import "../../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../../assets/css/personal.css";
@import "../../../../assets/css/infstyle.css";
</style>
